<template>
	<view>
		<navbar :scrollTop="scrollY" :isLove="isLove" @collect="toCollect"></navbar>
		<view class="">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" scroll-with-animation="true"
				:style="'height:' + height + 'px;'" @scroll="scroll">
				<!-- 轮播 -->
				<VerticalDanmu :messages="message">
					<!-- 轮播 -->
					<productBg :images="detailData.imaegs?detailData.imaegs.split(','):[]" :isUp="detailData.isUp"
						@initImg="initImg" :code="detailData.id" :updateTime="detailData.updateTime" @catImg="catImg">
					</productBg>
				</VerticalDanmu>
				<!-- <productBg :images="detailData.imaegs?detailData.imaegs.split(','):[]"></productBg> -->
				<!-- 标题 区域 -->
				<view class="product-info mb-24">
					<!-- 标题 -->
					<view class="acea-row row-middle row-between title-box">
						<view class="title">
							<!-- <view class="red-tag">优质</view> -->
							<view class="title-text-i">{{detailData.title}}</view>
							<!-- 34*3+120 根据标题字数设置距上 距左距离-->
							<!-- <view class="claim-box" style="left:222rpx">认领该品牌</view> -->
						</view>
						<view class="acea-row row-middle row-between share-btns">
							<button open-type="share">
								<image src="../static/images/wechat_icon.png" mode=""></image>
								<view style="font-size: 23rpx;">微信</view>

							</button>
							<button @click="toReport">
								<image src="../static/images/report_icon.png" mode=""></image>
								<view style="font-size: 23rpx;">举报</view>
							</button>
						</view>
						<!-- <view class="acea-row row-middle row-between share-btns">
							<view>
								<image src="../static/images/wechat_icon.png" mode=""></image>
								<view>微信</view>
							</view>
							<view>
								<image src="../static/images/report_icon.png" mode=""></image>
								<view>举报</view>
							</view>
						</view> -->
					</view>
					<view class="acea-row brand-types">
						<view v-for="item in detailData.advantageIds" :key="item">{{item}}</view>

					</view>
					<!-- 浏览、咨询统计 -->
					<view class="acea-row row-middle row-between visit-box border-b">
						<view class="visit-advtar" @click="toVisitor">
							<image :src="m.avatar" mode=""
								v-for="(m,ind) in detailData.managementResponse?detailData.managementResponse:[]"
								:key="ind" :style="{left: (20 * ind) + 'rpx'}"></image>
						</view>
						<view class="acea-row row-middle row-between visit-l">
							<view class="visit-num" @click="toVisitor">{{detailData.view?detailData.view:0}}人浏览</view>
							<view class="visit-num">
								{{detailData.communication && detailData.communication!= 0 ?detailData.communication: communicationRandom}}人咨询
							</view>
						</view>
					</view>
					<!-- 消费档次 消费群体 -->
					<view class="brand-class">
						<view class="acea-row row-middle row-between pd-t-b-24 border-b">
							<view class="acea-row row-middle w-48">
								<view class="label">商品名称</view>
								<view class="text">{{ detailData.commodityName || '' }}</view>
							</view>
							<view class="acea-row row-middle w-48">
								<view class="label">商品类别</view>
								<view class="text">{{ detailData.categoryName || '' }}</view>
							</view>
							<view class="acea-row row-middle w-48" style="margin-top: 15rpx ;">
								<view class="label">商品数量</view>
								<view class="text">{{ detailData.commodityNum || 0 }}</view>
							</view>
							<view class="acea-row row-middle w-48" style="margin-top: 15rpx ;">
								<view class="label">计量单位</view>
								<view class="text">{{ detailData.unitName || '' }}</view>
							</view>
							<view class="acea-row row-middle w-48" style="margin-top: 15rpx ;">
								<view class="label">商品价格</view>
								<view class="text">{{ detailData.commodityPrice || 0 }}</view>
							</view>
						</view>
					</view>
					<!-- 门店数量 人均消费  日营业额 净利润率 -->
					<!-- 					<view class="acea-row row-middle row-between shop-area">
						<view class="">
							<view class="red-bold-txt">235</view>
							<view class="gray-txt">门店数量</view>
						</view>
						<view class="">
							<view class="red-bold-txt">56.5<text class="red-bold-txt-s">元</text></view>
							<view class="gray-txt">人均消费</view>
						</view>
						<view class="">
							<view class="red-bold-txt">8000<text class="red-nomarl-txt">元</text> </view>
							<view class="gray-txt">日营业额</view>
						</view>
						<view class="">
							<view class="red-bold-txt">60<text class="red-nomarl-txt">%</text></view>
							<view class="gray-txt">净利润率</view>
						</view>
					</view> -->
					<!-- 地址 -->
					<view class="acea-row row-top row-between address border-b">
						<view class="address-l line2">{{detailData.address}}</view>
						<view class="acea-row row-middle distance" @click="toLocation">
							<image src="../static/images/red_location.png" mode=""></image>
							<view>{{kmUnit(detailData.distance)}}</view>
						</view>
					</view>
					<!-- 品牌公司名称 -->
					<!-- 		<view class="acea-row row-middle compony-name">
						<image src="../static/images/company_icon.png" mode=""></image>
						<view class="text">湖南天鲜配生鲜有限公司</view>
					</view> -->
				</view>
				<!-- 可切换区域 -->
				<!-- 		<view class="mb-24">
					<detail-nav :tabNav="detailTabnav"></detail-nav>
				</view> -->
				<!-- 经营特色 联系人 -->
				<view class="module-box white-bg mb-24">
					<!-- 经营特色 -->
					<view class="supplement pd-t-b-24">
						<view class="module-title">服务特色</view>
						<view class="text pd-t-b-24">
							{{detailData.serviceCharacteristics}}
						</view>
					</view>
					<!-- 品牌故事 -->
					<view class="supplement pd-t-b-24">
						<view class="module-title">服务详情</view>
						<view class="text pd-t-b-24">
							{{detailData.details}}
						</view>
					</view>
					<!-- 联系人 -->
					<contacts-list :list="detailData.contacts"></contacts-list>
				</view>
				<!-- 推荐 -->
				<view class="goods">
					<view class="acea-row row-between goods-top">
						<view class="acea-row row-middle tabs">
							<view :class="['tab',goodsTabOn==index?'tab-on':'']" v-for="(item,index) in goodsTab"
								:key="index" @click="changeRecommed(index)">{{item}}</view>
						</view>
						<!-- <view class="shop-btn">
							金币商城
						</view>	 -->
					</view>
					<suppleRecommend :notType="false" :showMask="true" :list='nearbyList'></suppleRecommend>
				</view>

				<view class="uni-p-b-98"></view>
			</scroll-view>
		</view>

		<!-- <detail-footer :contact="detailData" :info="detailData"></detail-footer> -->
		<detail-footer :contact="detailData" @toPhone="toPhone" @toCollect="toCollect"
			:info="detailData"></detail-footer>
		<report :link-id="detailData.id" :types="5" ref="report" />
	</view>
</template>

<script>
	import navbar from '../components/navbar/navbar.vue'
	import productBg from '../components/productBg/productBg.vue'
	import detailNav from '../components/detailNav/detailNav.vue'
	import detailFooter from '../components/footer/footer.vue'
	import contactsList from '../components/contactsList/contactsList.vue'
	import recommend from '../components/recommend/recommend.vue'
	import suppleRecommend from '../components/recommend/suppleRecommend.vue'
	import report from "@/pages/details/components/goods_report/report.vue"
	import VerticalDanmu from '@/pages/details/components/VerticalDanmu/index.vue'
	import {
		getSuppleDetail,
		getRecommendList
	} from '@/api/api.js'
	export default {
		components: {
			navbar,
			productBg,
			detailNav,
			detailFooter,
			contactsList,
			recommend,
			suppleRecommend,
			report,
			VerticalDanmu
		},
		data() {
			return {
				scrollY: 0,
				scrollTop: 0,
				isLove: false,
				detailTabnav: [{
					name: '供应链',
					type: '1',
					num: 2
				}],
				detailData: {},
				height: 0,
				opacity: 0,
				goodsTabOn: 0,
				goodsTab: ['为你推荐', '附近推荐'],
				goodsList: [1, 2],
				visitInfo: [1, 2, 3, 4, 5, 6, 7, 8, 9, 8],
				dataList: {},
				images: [],
				mind: 0,
				videos: [],
				nearList: [], //附近推荐
				nearPage: 1,
				nearTotalPage: 1,
				loading: true,
				message: [],
				loadTitle: '我也是有底线的',
				id: 0,
				nearbyList: [],
				communicationRandom: (Math.floor(Math.random() * (500 - 50 + 1)) + 50),
				rewardTitle: '',
				shareInfo: { //用于分享
					title: "",
					infoId: "",
					shareId: "",
					infoType: 4,
					isInitStatus: 0
				},
				detailInfo: { //用于添加浏览记录
					type: '',
					st: '',
					storeCategory: ''
				},
				bhv:[]
			};
		},
		onLoad(options) {
			let that = this;
			if (!options.id) return uni.navigateBack()
			this.id = options.id;
			this.getDetail(options.id)
			uni.getSystemInfo({
				success: function(res) {
					that.height = res.windowHeight;
				}
			});
			if (options.spread) {
				this.shareInfo.shareId = options.spread
			}
			this.isReward = options.isReward;
			if (this.isReward) {
				this.rewardTitle = options.rewardTitle
			}
			this.mind = options.mind ? options.mind : this.mind
			this.getNearList()
		},
		methods: {
			scroll: function(e) {
				var that = this,
					scrollY = e.detail.scrollTop;
				var opacity = scrollY / 200;
				opacity = opacity > 1 ? 1 : opacity;
				that.$set(that, 'opacity', opacity);
				that.$set(that, 'scrollY', scrollY);
			},
			toReport() {
				this.$refs.report.open();
			},
			toPhone() {
				if (this.bhv.length < 1 || this.bhv.indexOf(2) == -1) {
					this.bhv.push(2)
				}
				//console.log(this.bhv)
			},
			catImg() {
				if (this.bhv.length < 1 || this.bhv.indexOf(4) == -1) {
					this.bhv.push(4)
				}
			},
			toCollect() {
				if (this.bhv.length < 1 || this.bhv.indexOf(3) == -1) {
					this.bhv.push(3)
				}

			},
			getDetail(id) {
				let params = {
					...this.$location
				}
				getSuppleDetail(id, params).then(res => {
					console.log(res)
					if (res.code == 200) {
						res.data.imaegs = res.data.imaegs ? res.data.imaegs.split(',') : this.$noImageShow;
						res.data.advantageIds = res.data.serviceCharacteristics ? (res.data.serviceCharacteristics
							.split(',')) : []
						let c = this.itemList ? this.itemList.filter(item => item.id == res.data.category) : [];
						res.data.categoryName = c[0] ? c[0].name : '';
						// res.data.categoryName = [0]
						// res.data.contacts = res.data.contacts.map(item => ({
						// 	...item,
						// 	username: item.contactName,
						// 	phone: item.contactPhone
						// }))
						this.contactList = res.data.contacts
						// res.data.imaegs.forEach(item => {
						// 	const len = item.length;
						// 	const type = item.substring(len - 3, len);
						// 	['jpg', 'png'].includes(type) ? this.images.push(item) : this.videos.push(
						// 		item);
						// })
						console.log(this.images, this.videos)

						this.detailData = res.data
						this.detailData.vistype = 4;
						this.existsIsLove(this.detailData.id)
						this.shareInfo.infoId = this.detailData.id;
						if (this.detailData.managementResponse) {
							this.detailData.managementResponse.forEach(item => {
								this.message.push({
									content: (item.nickname ? item.nickname : '匿名') + '查看了店铺',
									avatar: item.avatar
								})
							})
						}
						if (this.isReward == 1) {
							this.shareInfo.title = this.rewardTitle;
						} else {
							this.shareInfo.title = this.detailData.title;
						}
						this.shareInfo.isInitStatus = 1;
						console.log(this.detailData)
					}
				})
			},
			toLocation() {
				let that = this;
				uni.openLocation({
					latitude: parseFloat(that.detailData.latitude),
					longitude: parseFloat(that.detailData.longitude),
					success: function() {
						console.log('success');
					}
				});
			},
			kmUnit(m) {
				var v;
				m = Number(m)
				if (typeof m === 'number' && !isNaN(m)) {
					if (m > 1) {
						v = m.toFixed(2) + 'km'
					} else {
						v = (m * 1000).toFixed(2) + 'm'
					}
				} else {
					v = '0m'
				}
				return v;
			},
			toVisitor() {
				uni.navigateTo({
					url: "/pages/aboutUsers/aboutUsers/visitor?mind=" + this.mind + "&data=" + JSON.stringify(
						this.detailData)
				})
			},
			toCollect(status) {
				let that = this;
				let d = {
					status,
					type: 4,
					id: that.detailData.id
				}
				if (status) {
					d.title = that.detailData.title
				}
				getApp().globalData.toCollect(d, (res) => {
					that.existsIsLove(res.id);
				})
			},
			existsIsLove(id) {
				let that = this;
				getApp().globalData.existsIsLove({
					id,
					type: 4
				}).then(res => {
					console.log('appExistsLove', res)
					that.isLove = res;
				})
			},
			//切换推荐栏
			changeRecommed(index) {
				this.goodsTabOn = index;
				this.loading = false;
				this.nearPage = 1;

				this.getNearList()
			},
			//附近推荐
			async getNearList() {
				console.log('fujin....')
				console.log()
				if (this.nearPage == 1) {
					this.nearbyList = []
				}

				let parmas = {
					limit: 4,
					page: this.nearPage,
					city: this.$city
				}
				if (this.goodsTabOn == 1) {
					parmas = {
						...parmas,
						...this.$location
					}
				}
				try {
					let {
						data
					} = await getRecommendList(parmas);
					let d = [...this.nearbyList, ...data.list];
					this.nearbyList = d.filter(item => item.id != this.curId && item.id != this.id)
					console.log('jigweidu=', this.nearbyList)
					this.totalNearPage = data.totalPage;
					this.loading = true;
					if (this.nearPage == data.totalPage && this.nearbyList.length > 0) this.loadTitle = '我也是有底线的'
					else if (this.nearPage < data.totalPage && this.nearbyList.length > 0) this.loadTitle = '加载更多'
					else this.loadTitle = '暂无数据'
				} catch (e) {
					//TODO handle the exception
				}
			},
			//触底
			lower() {
				if (this.goodsTabOn != 1 || this.nearTotalPage <= this.nearPage) return
				this.loading = false
				this.nearPage += 1;
				this.getNearList()
			},
			onReachBottom() {
				this.nearPage++;
				this.getNearList()
			}
		}
	}
</script>

<style lang="scss">
	@import "../static/css/index.scss";
</style>